<!--
 * @Author: 孙大大
 * @Date: 2022-04-09 03:49:33
 * @LastEditTime: 2022-04-12 11:10:00
 * @FilePath: \黑马面面\src\views\questions\randoms.vue
-->
<template>
  <div class="randoms-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="80px"
          style="display: flex; justify-content: space-between"
        >
          <el-form-item label="关键字" class="keyWords" prop="keyWords">
            <el-input
              type="number"
              v-model="form.keyWords"
              placeholder="根据编号搜索"
              @change="changeKeyWords"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm()">清除</el-button>
            <el-button type="primary" @click="searchList">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-alert type="info"> 数据一共{{ tableData.length }}条 </el-alert>
      </div>
      <!-- 结果显示区域 -->
      <el-table :data="tableData" style="width: 100%" @row-click="cellClick">
        <el-table-column prop="code" label="编号" width="100">
        </el-table-column>
        <el-table-column prop="question" label="题型" width="160">
        </el-table-column>
        <el-table-column prop="questionId" label="题目编号"> </el-table-column>
        <el-table-column prop="date" label="录入时间"> </el-table-column>
        <el-table-column prop="ansDate" label="答题时间(s)"> </el-table-column>
        <el-table-column prop="true" label="正确率(%)"> </el-table-column>
        <el-table-column prop="addPenson" label="录入人"> </el-table-column>
        <el-table-column prop="todo" label="操作">
          <el-button
            @click="delRow"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="30">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// import { getRandoms } from "@/api/questions";
export default {
  data() {
    return {
      form: {
        keyWords: "",
      },
      tableData: [
        {
          code: "1",
          question: "1+1=2?",
          questionId: "1",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "10%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "2",
          question: "1+1=2?",
          questionId: "2",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "15%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "3",
          question: "1+1=2?",
          questionId: "3",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "32%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "4",
          question: "1+1=2?",
          questionId: "4",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "97%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "5",
          question: "1+1=2?",
          questionId: "5",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "6",
          question: "1+1=2?",
          questionId: "6",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "76%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "7",
          question: "1+1=2?",
          questionId: "7",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "8",
          question: "1+1=2?",
          questionId: "8",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "63%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "9",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "10",
          question: "1+1=2?",
          questionId: "1",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "10%",
          addPenson: "迪迦奥特曼",
        },
      ],
      tableData_1: [
        {
          code: "11",
          question: "1+1=2?",
          questionId: "2",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "15%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "12",
          question: "1+1=2?",
          questionId: "3",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "32%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "13",
          question: "1+1=2?",
          questionId: "4",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "97%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "14",
          question: "1+1=2?",
          questionId: "5",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "15",
          question: "1+1=2?",
          questionId: "6",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "76%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "16",
          question: "1+1=2?",
          questionId: "7",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "17",
          question: "1+1=2?",
          questionId: "8",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "63%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "18",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "19",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "20",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
      ],
      tableData_2: [
        {
          code: "21",
          question: "1+1=2?",
          questionId: "1",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "10%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "22",
          question: "1+1=2?",
          questionId: "2",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "15%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "23",
          question: "1+1=2?",
          questionId: "3",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "32%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "24",
          question: "1+1=2?",
          questionId: "4",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "97%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "25",
          question: "1+1=2?",
          questionId: "5",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "26",
          question: "1+1=2?",
          questionId: "6",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "76%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "27",
          question: "1+1=2?",
          questionId: "7",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "28",
          question: "1+1=2?",
          questionId: "8",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "63%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "29",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "30",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
      ],
      tableData1: [
        {
          code: "1",
          question: "1+1=2?",
          questionId: "1",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "10%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "2",
          question: "1+1=2?",
          questionId: "2",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "15%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "3",
          question: "1+1=2?",
          questionId: "3",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "32%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "4",
          question: "1+1=2?",
          questionId: "4",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "97%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "5",
          question: "1+1=2?",
          questionId: "5",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "6",
          question: "1+1=2?",
          questionId: "6",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "76%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "7",
          question: "1+1=2?",
          questionId: "7",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "8",
          question: "1+1=2?",
          questionId: "8",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "63%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "9",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "10",
          question: "1+1=2?",
          questionId: "1",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "10%",
          addPenson: "迪迦奥特曼",
        },
      ],
      tableData1_1: [
        {
          code: "11",
          question: "1+1=2?",
          questionId: "2",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "15%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "12",
          question: "1+1=2?",
          questionId: "3",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "32%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "13",
          question: "1+1=2?",
          questionId: "4",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "97%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "14",
          question: "1+1=2?",
          questionId: "5",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "15",
          question: "1+1=2?",
          questionId: "6",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "76%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "16",
          question: "1+1=2?",
          questionId: "7",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "17",
          question: "1+1=2?",
          questionId: "8",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "63%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "18",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "19",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "20",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
      ],
      tableData1_2: [
        {
          code: "21",
          question: "1+1=2?",
          questionId: "1",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "10%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "22",
          question: "1+1=2?",
          questionId: "2",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "15%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "23",
          question: "1+1=2?",
          questionId: "3",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "32%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "24",
          question: "1+1=2?",
          questionId: "4",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "97%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "25",
          question: "1+1=2?",
          questionId: "5",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "26",
          question: "1+1=2?",
          questionId: "6",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "76%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "27",
          question: "1+1=2?",
          questionId: "7",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "12%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "28",
          question: "1+1=2?",
          questionId: "8",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "63%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "29",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
        {
          code: "30",
          question: "1+1=2?",
          questionId: "9",
          date: "2022-04-09",
          ansDate: "2022-04-09",
          true: "65%",
          addPenson: "迪迦奥特曼",
        },
      ],
      rules: {
        keyWords: [
          {
            required: true,
            message: "编号不能为空",
            trigger: "blur",
          },
        ],
      },
      id: "",
    };
  },
  created() {
    // this.getRandoms();
  },
  methods: {
    // async getRandoms() {
    //   let res = await getRandoms();
    //   console.log(res);
    // },
    searchList() {
      // 遍历tableData,找到所有code等于form.keyWords的数据
      this.tableData = this.tableData.filter((item) => {
        return item.code.indexOf(this.form.keyWords) > -1;
      });
    },
    changeKeyWords() {
      this.tableData = this.tableData1;
    },
    resetForm() {
      this.form = this.$options.data().form;
    },
    cellClick(row) {
      // console.log(row);
      this.id = row.code;
      // console.log(this.id);
    },
    delRow() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 找到tableData中code等于this.id的数据,删除并重新渲染
          let index = this.tableData.findIndex((item) => {
            return item.code === this.id;
          });
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep.randoms-container {
  padding: 20px;

  .keyWords {
    display: inline-block;
    width: 335px;
    height: 36px;
  }

  .card {
    height: 100% !important;
  }

  .el-card__header {
    border: 0;
  }

  .el-card__body {
    padding: 0px 20px;
  }

  .bbb {
    padding-top: 25px;
  }
}
</style>
